<template>
  <div id="about-us">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <vue-markdown class="markdown-body" :source="mdSource"></vue-markdown>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar';
import VueMarkdown from 'vue-markdown';
import 'github-markdown-css';
import Utils from '@/common/pakjUtils';
import axios from 'axios';
export default {
  components: {
    [TopBar.name]: TopBar,
    VueMarkdown
  },
  data() {
    return {
      title: '用户充值协议',
      IsTopbar: true.valueOf,
      mdUrl: process.env.BASE_URL + 'static/markdown/rechargeAgt.md',
      mdSource: ''
    };
  },
  created() {
    axios.get(this.mdUrl).then(res => {
      this.mdSource = res.data;
    });
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  }
};
</script>

<style lang="stylus">
#about-us {
  .markdown-body {
    box-sizing: border-box;
    margin: 24px;
    font-size: 28px;
    letter-spacing: 1px;

    h4 {
      text-indent: 2em;
    }

    p {
      text-indent: 2em;
    }

    blockquote {
      p {
        text-indent: 0em;
      }
    }
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
}
</style>
